<template>
  <view class="container">
    <!-- 个人的动态 -->
    <view class="itme">
      <view class="header">
        <image src="../../static/myimg/logo.png" style="width: 88rpx; height: 88rpx; border-radius: 50%" mode=""></image>
        <view style="padding-left: 16rpx">
          <view class="topright">
            <text style="font-weight: 500; font-size: 32rpx; color: #151515; padding-right: 12rpx">环环</text>
            <image
              style="width: 28rpx; height: 28rpx; vertical-align: middle"
              :src="gender == 1 ? '../../static/dynamicimg/boy.png' : '../../static/dynamicimg/gril.png'"
              mode=""
            ></image>
          </view>
          <view style="font-weight: 400; font-size: 24rpx; color: #666666">5分钟前·河北省保定市</view>
        </view>
      </view>
      <view
        style="
          font-weight: 500;
          font-size: 28rpx;
          color: #151515;
          width: 670rpx;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          margin-top: 24rpx;
        "
      >
        字字句句透深情无限北岛情书~
      </view>
      <!-- 图片视频 -->
      <view style="display: flex; flex-wrap: wrap; align-items: center; margin-top: 20rpx">
        <image src="../../static/logo.png" style="width: 200rpx; height: 200rpx; margin-right: 16rpx; margin-bottom: 10rpx" mode="" v-for="index in 3"></image>
        <video src="" style="width: 200rpx; height: 200rpx"></video>
      </view>
      <!-- 点赞、评论 -->
      <view style="display: flex; justify-content: flex-end">
        <view style="display: flex; align-items: center">
          <view>
            <image
              @click="islike = !islike"
              :src="islike ? '../../static/dynamicimg/like.png' : '../../static/dynamicimg/likeact.png'"
              style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx"
              mode=""
            ></image>
            <text>55</text>
          </view>
          <view style="margin-left: 40rpx">
            <image src="../../static/dynamicimg/pinglun.png" style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx" mode=""></image>
            <text>15</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      islike: true
    };
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 0 30rpx;
  .itme {
    width: 690rpx;
    border-bottom: 2rpx solid #e8e8e8;
    padding-bottom: 34rpx;
    .header {
      display: flex;
      .topright {
      }
    }
  }
}
</style>
